<template>
  <!-- 等级选择器 -->
  <u-dialog title="等级选择器" :show.sync="show" width="1040px" :append-to-body="true" :auto-close="false" :footer="false" @cancel="cancel" @confirm="confirm">

    <!-- 条件筛选 -->
    <u-filtered>
      <el-form :inline="true" :model="listQuery" class="search-form">
        <el-form-item label="等级名称" prop="name">
          <el-input v-model="listQuery.name" placeholder="请输入等级名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="hdlFilter">查询</el-button>
        </el-form-item>
      </el-form>
    </u-filtered>

    <!-- 列表显示 -->
    <u-table
      :data="list"
      :loading="listLoading"
      :options="listOptions"
      :columns="columns"
      :pagination.sync="listQuery"
      :page="false"
      @selection-change="hdlSelectChange"
    >
      <template v-slot:right>
        <el-table-column label="" align="center" fixed="right">
          <template slot-scope="{ row }">
            <el-button v-if="isSelect(row)" @click="add(row)">选择</el-button>
            <el-button v-else type="primary" @click="sub(row)">已选</el-button>
          </template>
        </el-table-column>
      </template>
    </u-table>

  </u-dialog>

</template>

<script>
/**
 * 业务组件 - 等级选择器
 */
export default {
  name: 'Levels',
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    /** 是否多选 */
    multiple: {
      type: Boolean,
      default: true
    },
    /** 选中的数据列表 */
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      api: this.$u.api.MemberData,
      // 表格管理
      columns: [
        {
          prop: 'name',
          label: '等级名称'
        }
      ],
      // 查询分页数据
      listQuery: {
        name: ''
      },
      list: [],
      // 加载数据加载状态
      listLoading: false,
      listOptions: {
        mutiSelect: false,
        stripe: true
      }
    }
  },
  methods: {
    /**
     * 获取列表数据
     */
    hdlList() {
      const self = this
      // 打开加载状态
      self.listLoading = true
      // 查询列表数据
      self.api.level(self.listQuery).then(res => {
        // 获取列表数据
        self.list = res.data
        // 关闭加载状态
        setTimeout(() => {
          self.listLoading = false
        }, 0.5 * 1000)
      })
    },
    // 是否选中
    isSelect(row) {
      // fix:因为这里没有卡号,所以匹配卡号
      return this.$u.test.empty(this.data.filter(d => d.id === row.id)[0])
    },
    // 选中事件
    add(row) {
      if (!this.multiple) {
        if (this.data.length > 0) {
          this.$u.msg('限制单个等级', 'error')
          return
        }
      }
      this.data.push(row)
      if (this.multiple) {
        this.$emit('change', this.data)
      } else {
        const arr = this.data.slice(0, 1)
        this.$emit('change', arr)
      }
    },
    // 取消选中事件
    sub(row) {
      this.data.splice(this.data.findIndex(item => item.id === row.id), 1)
      if (this.multiple) {
        this.$emit('change', this.data)
      } else {
        const arr = this.data.slice(0, 1)
        this.$emit('change', arr)
      }
    },
    // 确认
    confirm() {
      this.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped>

</style>
